<template>

  <aside class="page-aside">
    <div class="menu-control" :class="{'is-collapse' :isCollapse}">
      <span class="btn-collapse" title="展开/折叠侧边栏" @click="isCollapse=!isCollapse">
        <i class="center-line"></i>
      </span>
    </div>
    <el-menu
      class="menu-list"
      :unique-opened="true"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      background-color="#476dbe"
      text-color="#fff"
      active-text-color="#009C84"
      router
    >
    <div v-for="(item,index) in userMenu" :key="index">
      <el-menu-item :index="item.path" v-if="getTheSame(item.mate.roles,userInfo.roles)">
        <!-- <i :class="item.icon"></i> -->
        <i :class="'iconfont '+item.icon" ></i>
        <span slot="title" v-text="item.name" style="margin-left:10px;"></span>
      </el-menu-item>
    </div>
 

    <el-submenu v-for="(menu,i) in configPage" :index="menu.index" :key="'info2-'+i">
      <template slot="title">
        <i :class="'iconfont '+menu.icon"></i>
        <span slot="title" style="margin-left:10px;">{{menu.name}}</span>
      </template>
      <template v-if="menu.children">
        <el-menu-item v-for="(subMenu,num) in menu.children" :index="subMenu.path" :key="num">
          <i :class="'iconfont '+subMenu.icon"></i>
          <span slot="title" v-text="subMenu.name" style="margin-left:10px;"></span>
        </el-menu-item>
      </template>
    </el-submenu>
     

    </el-menu>
  </aside>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "PageAside",
  data() {
    return {
      isCollapse: false,
      userInfo:'',
      userMenu: [
        {
          name: "图片管理",
          index: "picture",
          icon: "icon-tupian",
          path: "/picture",
          mate:{
            roles:["admin","operator"]
          }
        },
        {
          name: "图标管理",
          index: "icon",
          icon: "icon-tubiaoguanli",
          path: "/icon",
          mate:{
            roles:["admin","operator"]
          }
        },
        {
          name: "数据查询",
          index: "data",
          icon: "icon-shujuchaxun",
          path: "/data",
          mate:{
            roles:["admin","operator"]
          }
        },
        {
          name: "分类管理",
          index: "category",
          icon: "icon-fenleiguanli",
          path: "/category",
          mate:{
            roles:["admin","operator"]
          }
        },
        {
          name: "标签管理",
          index: "tag",
          icon: "icon-biaoqianguanli",
          path: "/tag",
          mate:{
            roles:["admin","operator"]
          }
        },
        
        {
          name: "后台数据",
          index: "back",
          icon: "icon-houtaishuju",
          path: "/back",
          mate:{
            roles:["admin","operator"]
          }
        },
        {
          name: "后台权限",
          index: "authority",
          icon: "icon-houtaiquanxian",
          path: "/authority",
          mate:{
            roles:["admin"]
          }
        },
        {
          name: "用户列表",
          index: "userList",
          icon: "icon-xingzhuang",
          path: "/userList",
          mate:{
            roles:["admin","operator"]
          }
        }
      ],
      configPage:[
        {
          name: "页面配置",
          index: "config",
          icon: "icon-yemianpeizhi",
          children: [
            {
              name: "BANNER位配置",
              path: "/bannerConfig",
              icon: "icon-banner",
              mate:{
                roles:["admin","operator"]
              }
            },
            {
              name: "搜索位配置",
              path: "/searchConfig",
              icon: "icon-sousuopeizhi",
              mate:{
                roles:["admin","operator"]
              }
            },
            {
              name: "热门专题位配置",
              path: "/hotConfig",
              icon: "icon-remenzhuanti",
              mate:{
                roles:["admin","operator"]
              }
            },
            {
              name: "专题位配置",
              path: "/TopicConfig",
              icon: "icon-tubiaozhizuomoban",
              mate:{
                roles:["admin","operator"]
              }
            },
            {
              name: "推荐分类",
              path: "/suggestConfig",
              icon: "icon-feneli-copy",
              mate:{
                roles:["admin","operator"]
              }
            }
          ]
        }
      ]
    };
  },
  computed: {
    ...mapState("user", {
      state: state => state
    })
  },
  created() {
    this.userInfo=this.state;
  },
  methods: {
    getTheSame(attendUid, dataattendUid) {
      var result = new Array();
      var c = dataattendUid.toString();
      for (var i = 0; i < attendUid.length; i++) {
          if (c.indexOf(attendUid[i].toString()) > -1) {
              for (var j = 0; j < dataattendUid.length; j++) {
                  if (attendUid[i] == dataattendUid[j]) {
                      result.push(attendUid[i]);
                      break;
                  }
              }
          }
      }
      // return result
      if (result.length > 0) {
          return true;
      } else {
          return false;
      }
    },
    loadMore() {},
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "../../assets/css/icon.css";
.page-aside {
  display: flex;
  flex-flow: column;
  background-color: @color-primary;
  .menu-control {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    &.is-collapse {
      .btn-collapse {
        .center-line {
          background-color: #fff;
        }
        &:before {
          transform: rotate(0deg);
          bottom: 14px;
          right: 20px;
        }
        &:after {
          transform: rotate(0deg);
          top: 14px;
        }
      }
    }
    .btn-collapse {
      cursor: pointer;
      transition: all 0.4s;
      height: 50px;
      width: 64px;
      padding: 0 20px;
      flex: 0 0 64px;
      position: relative;
      .center-line {
        height: 3px;
        background-color: rgba(255, 255, 255, 0.7);
        top: 50%;
        position: absolute;
        left: 50%;
        width: 24px;
        transform: translate(-50%, -50%);
        transition: all 0.4s;
        border-radius: 4px;
      }
      &:after,
      &:before {
        position: absolute;
        content: "";
        height: 3px;
        background-color: #fff;
        border-radius: 4px;
        transition: all 0.4s;
        width: 16px;
      }
      &:before {
        right: 32px;
        bottom: 19px;
        transform: rotate(45deg);
      }
      &:after {
        transform: rotate(-45deg);
        left: 16px;
        top: 19px;
      }
      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
      &:active {
        background-color: darken(@color-primary, 10%);
      }
    }
  }
  .menu-list {
    flex: 1;
    border-right: none;
    background: @color-primary url("../../assets/bg_left_menu.png") center
      bottom / 100% auto no-repeat;
    .el-submenu [class^="el-icon-"] {
      color: #fff;
      opacity: 0.7;
    }
    ::v-deep .el-submenu__icon-arrow {
      color: #fff;
      opacity: 0.7;
    }
    &:not(.el-menu--collapse) {
      width: 220px;
      min-height: 400px;
    }
  }
}
</style>
